<template>
	<view class="container">
		<view class="v-tab">
			<view class="v-tab-container">
				<view class="v-tab-left" :class="datas.TabIndex === 1 ? 'v-tab-active' : ''" @click="tabClick(1)">商城买单</view>
				<view class="v-tab-right" :class="datas.TabIndex === 2 ? 'v-tab-active' : ''" @click="tabClick(2)">商城卖单</view>
			</view>
			<view class="v-tab-content">
				<view
					class="v-order-status-item"
					:class="datas.OrderState === item.Key ? 'v-order-status-item-active' : ''"
					v-for="(item, index) in datas.OrderStateList"
					v-if="datas.TabIndex === 1"
					@click="changeOrderState(item)"
				>
					<uni-badge  class="uni-badge-left-margin" v-if="item.Count != 0"  :text="item.Count" absolute="rightTop" :offset="[-3, -3]" size="small">
						{{ item.Value }}
					</uni-badge>
					<view v-if="item.Count == 0">{{ item.Value }}</view>
				</view>

				<view
					class="v-order-status-item"
					:class="datas.OrderState === item.Key ? 'v-order-status-item-active' : ''"
					v-for="(item, index) in datas.OrderStateList"
					@click="changeOrderState(item)"
					v-if="datas.TabIndex === 2"
				>
					<uni-badge  class="uni-badge-left-margin" v-if="item.Count != 0" :text="item.Count" absolute="rightTop" :offset="[-3, -3]" size="small">
						{{ item.Value }}
					</uni-badge>
					<view v-if="item.Count == 0">{{ item.Value }}</view>
				</view>
			</view>
		</view>
		<view class="v-orders">
			<view class="v-order-item" v-for="(item, index) in datas.Orders">
				<view class="v-order-item-left">
					<image :src="getServerPath(item.ImageUrl)" mode="scaleToFill"></image>
				</view>
				<view class="v-order-item-right">
					<view class="v-order-title">
						{{ item.Title }}
					</view>
					<view class="v-order-item-right-group">
						<view class="v-order-item-right-group-left">
							<view class="v-order-originalprice">￥{{ item.OriginalPrice }}</view>
							<view class="v-order-price">￥{{ item.Price }}</view>
						</view>
						<view class="v-order-item-right-group-right">
							<view class="v-order-item-op-active" v-if="item.State == 1 && datas.TabIndex === 1" @click="updateOrderState(item, 4)">付款</view>
							<view class="v-order-item-op-cancel" v-if="item.State == 1 && datas.TabIndex === 1" @click="updateOrderState(item, 5)">取消</view>
						</view>
					</view>
				</view>
				<view class="v-order-status-container">
					<view class="v-order-status-buy" :class="getOrderStateColor(item)"></view>
					<text class="v-order-status-text">{{ getOrderStateText(item) }}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="datas.loadState"></uni-load-more>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
export default {
	data() {
		return {
			curItem: null,
			datas: {
				messageText: '',
				msgType: 'success',
				duration: 2000,
				TabIndex: 1, //1:买单 2:卖单
				OrderState: 0,
				OrderStateList: [
					{
						Key: 0,
						Value: '全部',
						Count:"0"
					},
					{
						Key: 1,
						Value: '待付款',
						Count:"0"
					},
					{
						Key: 2,
						Value: '待发货',
						Count:"0"
					},
					{
						Key: 3,
						Value: '待收货',
						Count:"0"
					},
					{
						Key: 4,
						Value: '已完成',
						Count:"0"
					},

					{
						Key: 5,
						Value: '已取消',
						Count:"0"
					}
				],
				Orders: [
					// {
					// 	Id: '0000-000-000-0000',
					// 	OrderNo: '202404070001',
					// 	ProductId: '0000-000-000-0000',
					// 	Title: '智利欢乐马288干红葡萄酒干红葡萄酒干红葡萄酒干红葡萄酒',
					// 	ImageUrl: '../../static/header.jpg',
					// 	Price: '2889.36',
					// 	OriginalPrice: '3899.99',
					// 	State: 1,
					// 	QiangGouTime: '2024-04-05 12:23',
					// 	PaymentTime: '2024-04-05 12:23',
					// 	CreateTime: '2024-04-05 12:23',
					// 	SellerId: '000-000-0000-0000',
					// 	SellerName: '张三',
					// 	BuierId: '000-000-0000-0000',
					// 	BuierName: '李四',
					// 	OrderType: 1 //1:买单 2:卖单
					// },
					// {
					// 	Id: '0000-000-000-0000',
					// 	OrderNo: '202404070001',
					// 	ProductId: '0000-000-000-0000',
					// 	Title: '智利欢乐马288干红葡萄酒干红葡萄酒干红葡萄酒干红葡萄酒',
					// 	ImageUrl: '../../static/header.jpg',
					// 	Price: '2889.36',
					// 	OriginalPrice: '3899.99',
					// 	State: 2,
					// 	QiangGouTime: '2024-04-05 12:23',
					// 	PaymentTime: '2024-04-05 12:23',
					// 	CreateTime: '2024-04-05 12:23',
					// 	SellerId: '000-000-0000-0000',
					// 	SellerName: '张三',
					// 	BuierId: '000-000-0000-0000',
					// 	BuierName: '李四',
					// 	OrderType: 1 //1:买单 2:卖单
					// },
					// {
					// 	Id: '0000-000-000-0000',
					// 	OrderNo: '202404070001',
					// 	ProductId: '0000-000-000-0000',
					// 	Title: '智利欢乐马288干红葡萄酒干红葡萄酒干红葡萄酒干红葡萄酒',
					// 	ImageUrl: '../../static/header.jpg',
					// 	Price: '2889.36',
					// 	OriginalPrice: '3899.99',
					// 	State: 11,
					// 	QiangGouTime: '2024-04-05 12:23',
					// 	PaymentTime: '2024-04-05 12:23',
					// 	CreateTime: '2024-04-05 12:23',
					// 	SellerId: '000-000-0000-0000',
					// 	SellerName: '张三',
					// 	BuierId: '000-000-0000-0000',
					// 	BuierName: '李四',
					// 	OrderType: 2 //1:买单 2:卖单
					// }
				],
				queryContent: '',
				totalPage: 0,
				currentPage: 1,
				pageRow: 6,
				loadState: 'more'
			}
		};
	},
	methods: {
		dialogConfirm() {
			console.log('点击确认');
			let _this = this;
			_this.updateOrderState_Post();
		},
		dialogClose() {
			console.log('点击关闭');
		},
		getServerPath: function (url) {
			let _this = this;
			console.log(`${_this.sysInfo.ImageBasePath}${url}`);
			return `${_this.sysInfo.ImageBasePath}${url}`;
		},
		getOrderStateText: function (item) {
			switch (item.State) {
				case 1:
					return '待付款';
				case 2:
					return '待发货';
				case 3:
					return '待收货';
				case 4:
					return '已完成';
				case 5:
					return '已取消';

				default:
					break;
			}
		},
		getOrderStateColor: function (item) {
			switch (item.State) {
				case 1:
					return 'state_color_blue';
				case 2:
					return '';
				case 3:
					return '';
				case 4:
					return 'state_color_green';
				case 5:
					return 'state_color_red';

				default:
					break;
			}
		},
		loadOrders: function () {
			console.log('loadOrders');

			let _this = this;
			//正式代码
			var authToken = authTokenUtil();
			var queryData = {
				PageSize: _this.datas.pageRow,
				PageIndex: _this.datas.currentPage,
				OrderState: _this.datas.OrderState,
				OrderType: _this.datas.TabIndex,
				QueryContent: _this.datas.queryContent
			};
			uni.request({
				url: _this.sysInfo.BasePath + 'Shop/GetOrderDatas',
				method: 'POST',
				data: queryData,
				header: {
					'content-type': 'application/json',
					Authorization: `${authToken}`
				},
				success: (res) => {
					if (res && res.data && res.data.Succeeded === true) {
						console.log(res);
						res.data.Data.Datas.forEach((item) => {
							_this.datas.Orders.push(item);
						});
						_this.datas.totalPage = res.data.Data.TotalPage;
						_this.datas.OrderStateList[0].Count=res.data.Data.StatisticInfo.QB||"0"
						_this.datas.OrderStateList[1].Count=res.data.Data.StatisticInfo.DFK||"0"
						_this.datas.OrderStateList[2].Count=res.data.Data.StatisticInfo.DFH||"0"
						_this.datas.OrderStateList[3].Count=res.data.Data.StatisticInfo.DSH||"0"
						_this.datas.OrderStateList[4].Count=res.data.Data.StatisticInfo.YWC||"0"
						_this.datas.OrderStateList[5].Count=res.data.Data.StatisticInfo.YQX||"0"
					} else {
						_this.sysUtils.tip({
							sender: _this,

							title: '加载订单信息失败！',
							icon: 'error'
						});
					}
				},
				fail: () => {
					_this.sysUtils.tip({
						sender: _this,
						title: '加载订单信息失败！',
						icon: 'error'
					});
				},
				complete: () => {}
			});
			uni.stopPullDownRefresh();
			if (_this.datas.currentPage >= _this.datas.totalPage) {
				_this.datas.loadStatus = 'noMore';
			} else {
				_this.datas.loadStatus = 'more';
			}
		},
		tabClick: function (index) {
			let _this = this;
			_this.datas.TabIndex = index;
			_this.datas.OrderState = 0;
			this.datas.Orders = [];
			// _this.datas.queryContent = '';
			_this.datas.currentPage = 1;
			_this.datas.totalPage = 0;
			_this.loadOrders();
		},
		changeOrderState: function (item) {
			let _this = this;
			_this.datas.OrderState = item.Key;
			this.datas.Orders = [];
			// _this.datas.queryContent = '';
			_this.datas.currentPage = 1;
			_this.datas.totalPage = 0;
			_this.loadOrders();
		},
		updateOrderState: function (item, state) {
			let _this = this;
			_this.curItem = JSON.parse(JSON.stringify(item));
			_this.curItem.State = state;
			var tip = '';
			if (state === 4) {
				tip = '确定要付款吗？';
			} else if (state === 5) {
				tip = '确定要取消吗？';
			}
			this.dialogMsg = tip;
			this.$refs.alertDialog.open();
		},
		updateOrderState_Post: function () {
			let _this = this;
			//正式代码
			var authToken = authTokenUtil();

			var queryData = _this.curItem;
			uni.request({
				url: _this.sysInfo.BasePath + 'Shop/ChangeOrderState',
				method: 'POST',
				data: queryData,
				header: {
					'content-type': 'application/json',
					Authorization: `${authToken}`
				},
				success: (res) => {
					if (res && res.data && res.data.Succeeded === true) {
						console.log(res);
						this.datas.Orders = [];
						// _this.datas.queryContent = '';
						_this.datas.currentPage = 1;
						_this.datas.totalPage = 0;
						_this.loadOrders();
					} else {
						_this.sysUtils.tip({
							sender: _this,

							title: '更改订单状态失败！',
							icon: 'error'
						});
					}
				},
				fail: () => {
					_this.sysUtils.tip({
						sender: _this,
						title: '更改订单状态失败！',
						icon: 'error'
					});
				},
				complete: () => {}
			});
			_this.curItem = null;
		},
		init: function () {
			console.log('init');
			let _this = this;
			_this.loadOrders();
		}
	},
	onReachBottom() {
		console.log('onReachBottom');
		let _this = this;

		if (_this.datas.currentPage >= _this.datas.totalPage) {
			_this.datas.loadState = 'noMore';
			return;
		} else {
			_this.datas.currentPage = _this.datas.currentPage + 1;
			_this.loadOrders();
		}
	},
	onPullDownRefresh() {
		console.log('onPullDownRefresh');
		let _this = this;
		this.datas.Orders = [];
		// _this.datas.queryContent = '';
		_this.datas.currentPage = 1;
		_this.datas.totalPage = 0;
		_this.loadOrders();
	},
	created() {
		let _this = this;
		validLoginToken(null, () => {
			uni.reLaunch({
				url: "/pages/account/login"
			})
		})
		_this.init();
	}
};
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	overflow-x: hidden;
}

.v-tab {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	padding: 20rpx 20rpx 0rpx 20rpx;
	box-sizing: border-box;
	position: fixed;
	background-color: #fff;
	left: 0;
	width: 100%;
	z-index: 10001;

	box-shadow: 0rpx 5rpx 5rpx #dfdfdf;
}

.v-tab-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	height: 100rpx;
}

.v-tab-left {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex: 1;
	border-bottom: solid 1rpx #c93a00ff;
	cursor: pointer;
}

.v-tab-right {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex: 1;
	border-bottom: solid 1rpx #c93a00ff;
	cursor: pointer;
}

.v-tab-active {
	border-bottom: none;
	border-top: solid 1rpx #c93a00ff;
	border-left: solid 1rpx #c93a00ff;
	border-right: solid 1rpx #c93a00ff;
	border-radius: 20rpx 20rpx 0 0;
	color: #c93a00ff;
}

.v-tab-content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	height: 100rpx;
}
.uni-badge-left-margin {
}
.v-order-status-item {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	margin-right: 10rpx;
	cursor: pointer;
	width: 120rpx;
	height: 50rpx;
}

.v-order-status-item-active {
	background-color: #c93a00ff;
	width: 120rpx;
	height: 50rpx;
	color: #fff;
	border-radius: 50rpx;
}

.v-orders {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	padding: 20rpx;
	margin-top: 200rpx;
}

.v-order-item {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	height: 200rpx;
	margin-bottom: 20rpx;
	position: relative;
	box-shadow: 0rpx 5rpx 10rpx #999;
}

.v-order-item-left {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	width: 200rpx;
}

.v-order-item-left image {
	width: 200rpx;
	height: 100%;
}

.v-order-item-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	margin: 10rpx;
	flex: 1;
}

.v-order-title {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex: 1;
	font-size: 26rpx;
}

.v-order-item-right-group {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.v-order-item-right-group-left {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

.v-order-originalprice {
	font-size: 26rpx;
	text-decoration: line-through;
	color: #999;
}

.v-order-price {
	font-size: 32rpx;
	color: #ff5343;
	font-weight: bold;
}

.v-order-item-right-group-right {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	font-size: 26rpx;
	flex: 1;
}

.v-order-item-op-active {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #c93a00ff;
	color: #fff;
	font-size: 26rpx;
	padding: 10rpx;
	width: 100rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
	cursor: pointer;
}

.v-order-item-op-cancel {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #999;
	color: #fff;
	font-size: 26rpx;
	padding: 10rpx;
	width: 100rpx;
	border-radius: 10rpx;
	cursor: pointer;
}

.v-order-status-container {
	position: absolute;
	top: 0;
	right: 0;
}

.v-order-status-sell {
	width: 0;
	height: 0;
	border-left: 55rpx solid transparent;
	/* 左边框 */
	border-right: 55rpx solid #00a9f2;
	/* 右边框 */
	border-top: 55rpx solid #00a9f2;
	/* 下边框，这里可以设置你想要的颜色 */
	border-bottom: 55rpx solid transparent;
	/* 下边框，这里可以设置你想要的颜色 */
}

.v-order-status-buy {
	width: 0;
	height: 0;
	border-left: 55rpx solid transparent;
	/* 左边框 */
	border-right: 55rpx solid #00a9f2;
	/* 右边框 */
	border-top: 55rpx solid #00a9f2;
	/* 下边框，这里可以设置你想要的颜色 */
	border-bottom: 55rpx solid transparent;
	/* 下边框，这里可以设置你想要的颜色 */
}

.v-order-status-text {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 20rpx;
	margin-right: 0rpx;
	transform: rotate(45deg);
	font-size: 26rpx;
	color: #fff;
}
.state_color_blue {
	/* 左边框 */
	border-right: 55rpx solid #00a9f2 !important;
	/* 右边框 */
	border-top: 55rpx solid #00a9f2 !important;
}
.state_color_green {
	/* 左边框 */
	border-right: 55rpx solid #005500 !important;
	/* 右边框 */
	border-top: 55rpx solid #005500 !important;
}
.state_color_red {
	/* 左边框 */
	border-right: 55rpx solid #aa0000 !important;
	/* 右边框 */
	border-top: 55rpx solid #aa0000 !important;
}
</style>
